<template>
  <div id="agent">
    <!--<h2>成为代理商</h2>-->
    <!--招募-->
    <div class="agent-header">
      <div>
        <h1>穿云箭代理招募</h1>
        <p>穿云箭诚招兑换码代理商，通过穿云箭后台购买套餐兑换码，并通过各种渠道进行销售您销售兑换码</p>
        <p>越多，佣金也就越多</p>
      </div>
    </div>
    <!--加入流程-->
    <div class="agent-joinProcess">
      <h2>如何成为穿云箭代理商</h2>
      <div class="agent-content">
        <div class="process-list" v-for="process in processs">
          <img :src="process.imgSrc">
          <p class="ptext1">{{process.ptext1}}</p>
          <p class="ptext2">{{process.ptext2}}</p>
        </div>
      </div>
    </div>
    <!--申请加入-->
    <div class="apply-join">
      <div>
        <h3>提交申请</h3>
        <form>
          <div>
            <input type="text" placeholder="请输入姓名">
          </div>
          <div>
            <input type="tel" placeholder="请输入手机号码">
          </div>
          <div id="secretCode">
            <input type="text" placeholder="验证码">
            <span><button>获取</button></span>
          </div>
          <div>
            <button class="paly">提交</button>
          </div>
        </form>
      </div>

    </div>
    <!--页脚-->
    <footer-one></footer-one>
  </div>
</template>
<script>
  import FooterOne from '../components/firmware/footer.vue'//页脚引入
  import agentbg from '../assets/bg_image_4.png'//背景图片
  import coop from '../assets/image_coop.png'//签约图片
  import sign from '../assets/image_sign.png' //申请图片
  import reply from '../assets/image_reply.png'//沟通图片
  export default{
      nane:'agent',
      data(){
          return{
            processs:[
              {
                imgSrc:sign,
                ptext1:'第一步',
                ptext2:'提交申请'
              },
              {
                imgSrc:reply,
                ptext1:'第二步',
                ptext2:'电话沟通'
              },
              {
                imgSrc:coop,
                ptext1:'第三步',
                ptext2:'签约合作'
              }

            ]

          }
      },
    components:{FooterOne}
  }
</script>
<style scoped>
  #agent{
    min-width: 1200px;
    margin: auto;
  }
  h2,h1,div,p{
    margin: 0;
    padding: 0;
  }
  .agent-header{
    height: auto;
    background: url("../assets/bg_image_4.png") no-repeat;
    background-size:100% 100%;
    -moz-background-size:100% 100%;
    width: 100%;
    vertical-align: bottom;
    display: table;
  }
  .agent-header div{
    display: table-cell;
    vertical-align: middle;
    padding: 10rem 0 10rem;
    color: #FF7A3F;
  }
  .agent-header div h1{
    font-weight: 200;
    font-size: 2.8rem;
    padding: 0 0 1rem 0;
  }
  .agent-header div p{
    font-size: 1.2rem;
  }
  .agent-joinProcess{
    height: auto;
    width: 100%;
    margin: auto;
    padding: 7.5rem 0;
  }
  .agent-joinProcess h2{
    font-size: 2.0rem;
    font-weight:100;
    padding: 0 0 3.0rem 0;
  }
  .agent-content{

  }
  .process-list{
    display:inline-block;
    padding:0 3.5rem;
  }
  .process-list p{
    line-height: 30px;
  }
  .process-list .ptext1{
    color:#FF7A3F;
  }
  .process-list .ptext2{

  }

  /*提交申请样式*/
  .apply-join{
    margin: auto;
    padding: 4rem 0  6rem;
    background-color:#FF7A3F;
    color: #ffffff;
  }
  .apply-join h3{
    font-size: 2.0rem;
    font-weight: 100;
    padding: 0 0 2rem 0;
  }
  .apply-join form div{
    padding:0 0 1.5rem 0;
  }
  .apply-join input{
    background-color:#FF7A3F;
    color: #ffffff;
    height: 1.5rem;
    width: 15rem;
    border: 1px solid #ffffff;
    outline:none;
    text-indent: 0.5rem;
    display: block;
    margin: auto;
  }
  /*验证码行*/
  #secretCode input{
    height: 1.5rem;
    width: 10rem;
    display: inline-block;
    margin: 0 1rem 0 0;
  }
  #secretCode input span{
    height: 1.5rem;
    width: 4rem;
    /*padding-left: 1rem;*/
    display: inline-block;
  }
  #secretCode button{
    height: 1.5rem;
    width: 4rem;
    border: 0;
    outline: none;
    background-color:#ffffff;
    color:#FF7A3F;
  }
  #secretCode{
    font-size: 0;/*去除inline-block之间的间距问题*/
    -webkit-text-size-adjust:none;
  }
  #secretCode button:hover{
    background-color: #f5f5f5;
    cursor: pointer;
  }
  .paly{
    height: 1.5rem;
    width: 15rem;
    background-color: #ffffff;
    color:#FF7A3F;
    border: 0;
  }
  button:hover{
    background-color: #f5f5f5;
    cursor: pointer;
  }

  ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:#ffffff;
  }
  :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#ffffff;
  }
  ::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#ffffff;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color:#ffffff;
  }

</style>
